<template>
  <div>
    <el-form class="input-form"
      label-position="right"
      label-width="150px"
      ref="editForm"
      :rules="propRules"
      :disabled="propReadonly"
      :model="form"
    >
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="科室" prop="deptName">
            <el-select v-model="form.deptId" filterable placeholder="请选择科室" @change="getPeriodYear" :disabled="formDisabled">
              <el-option v-for="item in propDictionaries.deptId"
                :key="item.id"
                :label="item.name"
                :value="item.id"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="年度" prop="periodYear">
            <el-select v-model="form.periodYear" filterable placeholder="请选择年度" disabled>
              <el-option v-for="item in propDictionaries.periodYear"
                :key="item.periodYear"
                :label="item.periodYear"
                :value="item.periodYear" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="上年度预算（元）" prop="budgetLast1">
            <el-input v-model="form.budgetLast1" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="上上年度预算（元）" prop="budgetLast2">
            <el-input v-model="form.budgetLast2" disabled />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="上年度消耗（元）" prop="useLast1">
            <el-input v-model="form.useLast1" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="上上年度消耗（元）" prop="useLast2">
            <el-input v-model="form.useLast2" disabled />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="填写日期" prop="busDate">
            <el-date-picker v-model="form.busDate" type="date" :format="dates.defaultDatePattern"  :picker-options="dates.pickerOptions.date" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="填写截至日期" prop="requiredCommitDate">
            <el-date-picker v-model="form.requiredCommitDate" type="date" :format="dates.defaultDatePattern"  :picker-options="dates.pickerOptions.date" disabled />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="起始日期" prop="startDate">
            <el-date-picker v-model="form.startDate" type="date" :format="dates.defaultDatePattern"  :picker-options="dates.pickerOptions.date" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="终止日期" prop="endDate">
            <el-date-picker v-model="form.endDate" type="date" :format="dates.defaultDatePattern"  :picker-options="dates.pickerOptions.date" disabled />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="预算额" prop="budgetAmount">
            <el-input v-model="form.budgetAmount" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="实际使用额" prop="useAmount">
            <el-input v-model="form.useAmount" disabled />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="备注" prop="remark">
            <el-input type="textarea" v-model="form.remark" :autosize="{ minRows: 2, maxRows: 4}"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>

export default {
  data() {
    return {
      form: {},
      viewData: {},
      formDisabled: true
    }
  },
  methods: {
    periodChange() {
      let date = new Date()
      date.setYear(this.form.periodYear)
      this.$set(this.form, 'startDate', this.dates.getFirstDayOfYear(date).format(this.dates.defaultDatePattern))
      this.$set(this.form, 'endDate', this.dates.getLastDayOfYear(date).format(this.dates.defaultDatePattern))
    },
    getPeriodYear() {
      this.$ajax.get('/dept/budget_item/getPeriodYear', {params: {deptId: this.form.deptId}}).then(resp => {
        if (resp.data == 0) {
          this.utilMessage.error('没有需要做预算的计划了')
        } else {
          this.$set(this.form, 'periodYear', resp.data)
          this.getBudgetInfo()
          this.getlastYearBudget()
        }
      })
    },
    //获取财务的预算计划
    getBudgetInfo() {
      let wrapper = this.$newWrapper()
        .eq('periodYear', this.form.periodYear)
      let params = {
        queryString: JSON.stringify(wrapper.queryConditions)
      }
      this.$ajax.get('/dept/budget/list', params).then(resp => {
        if (!resp.data.length) {
          this.utilMessage.error(`财务科${this.form.periodYear}年度计划还没有制作，请待制作后进行填报！`)
          return false
        }
        let budget = resp.data[0]
        this.$set(this.form, 'startDate', budget.startDate)
        this.$set(this.form, 'endDate', budget.endDate)
        this.$set(this.form, 'requiredCommitDate', budget.requiredCommitDate)
      })
    },
    //获取上年的预算计划
    getlastYearBudget() {
      let periodYear = this.form.periodYear
      let wrapper = this.$newWrapper()
        .eq('periodYear', periodYear -= 1)
      let params = {
        queryString: JSON.stringify(wrapper.queryConditions)
      }
      this.$ajax.get('/dept/budget_item/list', params).then(resp => {
        if (!resp.data.length) {
          return false
        }
        let budget = resp.data[0]
        this.$set(this.form, 'budgetLast1', budget.budgetAmount)
        this.$set(this.form, 'budgetLast2', budget.budgetLast1)
        this.$set(this.form, 'useLast1', budget.useAmount)
        this.$set(this.form, 'useLast2', budget.useLast1)
      })
    }
  },
  created() {
    this.$emit('event-register', {
      validate: (callback) => {
        this.$refs.editForm.validate(callback)
      },
      beforeSave: () => {
        if (this.form.requiredCommitDate < this.form.busDate) {
          this.utilMessage.error('已过最晚填报日期！')
          return false
        }
        if (this.form.budgetAmount <= 0) {
          this.utilMessage.error('预算金额不能为0！')
          return false
        }
        this.$emit('data-callback', this.form)
        return true
      },
      afterMove: (formData, initData) => {
        this.form = global.utils.jsonClone(formData)
        this.$set(this.$data, 'formDisabled', !!formData.id)
        if (!formData.id) {
          this.$set(this.form, 'busDate', new Date().format(this.dates.defaultDatePattern))
        }
      },
      afterSave: () => {  },
      beforeDelete: () => {
        return true
      },
      afterDelete: () => {
      },
      beforeFlow: (flowButtonKey) => {
        return true
      },
      afterFlow: (flowButtonKey) => {
      },
      beforeClose: () => {
        return true
      }
    })
  },
  props: {
    propParent: Object,
    propInitData: Object,
    propPrimaryKey: String,
    propDictionaries: Object,
    propCurrentRow: Object,
    propViewFormData: Object,
    propReadonly: Boolean,
    propStatus: String,
    propRules: Object
  },
  components: {
  },
  computed: {
  }
}
</script>

<style lang="scss" scoped>
  .container {
    width: 100%;
    height: 100%;
  }
</style>
